<template>
    <Dashboard :menu="menu">
        <el-form label-width='110px' :model='formItem' :rules="rules" ref="formItem">
            <el-form-item label='模板名称' prop="name">
                <el-input v-model="formItem.name" style="width: 300px" placeholder="请输入模板名称" clearable></el-input>
            </el-form-item>
            <el-form-item label='计费方式'>
                <el-radio-group v-model="formItem.type">
                    <el-radio :label="0">按件数</el-radio>
                    <el-radio :label="1">按重量</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label='配送区域'>
                <el-table v-if="formItem.type == 0">
                    <el-table-column label="可配送区域"></el-table-column>
                    <el-table-column label="首件（个）"></el-table-column>
                    <el-table-column label="运费（元）"></el-table-column>
                    <el-table-column label="续件（个）"></el-table-column>
                    <el-table-column label="续费（元）"></el-table-column>
                    <el-table-column label="满额包邮（元）"></el-table-column>
                </el-table>
                <el-table v-else>
                    <el-table-column label="可配送区域"></el-table-column>
                    <el-table-column label="首重（kg）"></el-table-column>
                    <el-table-column label="运费（元）"></el-table-column>
                    <el-table-column label="续重（kg）"></el-table-column>
                    <el-table-column label="续费（元）"></el-table-column>
                    <el-table-column label="满额包邮（元）"></el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click="ok('formItem')">确定</el-button>
                <el-button @click='back'>返回</el-button>
            </el-form-item>
        </el-form>
    </Dashboard>
</template>

<script>
import Dashboard from "./../../../components/Dashboard.vue";
export default {
    components: {
        Dashboard
    },
    data() {
        return {
            menu: [
                {
                    name: "运费管理",
                    icon: "icon-dingdan",
                    sub: [
                        {
                            name: "运费管理",
                            url: "/shop/fee"
                        }
                    ]
                }
            ],
            formItem: {
                id: 0,
                name: "",
                type:0,
                status: true
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    async asyncData({ app, query }) {
        let data = {};
        // 地址
        const address = await app.$axios.$get(`/api/shop/home/shop/plugin/fee/address`);
        if(address && address.errmsg === "ok"){
            data.address = address.data;
        }
        if (query.id) {
            let config_data = await app.$axios.$get(
                `/api/shop/home/shop/plugin/coupon/info?id=${query.id}`
            );
            if (config_data && config_data.errmsg === "ok") {
                data.formItem = config_data.data;
                data.formItem.status = data.formItem.status ? true : false;
            }
            return data;
        } else {
            data.formItem = {
                id: 0,
                name: "",
                type:0,
                status: true
            };
            return data;
        }
    },
    methods: {
        ok(formItem) {
            this.$refs[formItem].validate(valid => {
                if (valid) {
                    // this.submit();
                } else {
                    return false;
                }
            });
        },
        async submit() {
            let data = {
                id: this.formItem.id,
                name: this.formItem.name,
                status: this.formItem.status,
            };
            const res = await this.$axios.$post(
                "/api/shop/home/shop/plugin/fee/add",
                data
            );
            if (res && res.errmsg === "ok") {
                this.$message.success({
                    type: "success",
                    message: "保存成功"
                });
                this.$router.push({
                    path: "/shop/fee"
                });
            }
        },
        back() {
            this.$router.push({
                path: "/shop/fee"
            });
        }
    }
};
</script>
